<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>侦听器</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	
</head>
<body>
	<div id="watch-example">
		<p>
			Ask a yes/no question:
			<input v-model="question">
		</p>
		<p>{{answer}}</p>
	</div>
	
	<script type="text/javascript">
		var vm = new Vue({
			el: '#watch-example',
			data:{
				question:'',
				answer: 'I cannot give you an answer until you ask a question!'
			},
			watch: {
				question: function(newQuestion, oldQuestion){
					this.answer = 'Waiting for you to stop typing...'
					this.debouncedGetAnswer()
				}
			},
			created: function(){
				this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
			},
			method:{
				getAnswer: function(){
					if (this.question.indexOf('?') === -1) {
						this.answer = 'Questions usually contain a question mark. :-)'
						return
					}
					this.answer = 'Thinking...'
					var vm2 = this
					axios.get('http://yesno.wtf/api')
					.then(function (response){
						vm2.answer = _.capitalize(response.data.answer)
					})
					.catch(function(error){
						vm2.answer = 'Error! Could not reach the API. ' + error
					})
				}
			}

		})
	</script>
	<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
</body>
</html>